[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]png:file="public/ecommerce-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ecommerce-dashboard-etsWC0KexF73EKica8LY8JnDPEW3y8.png" isMerged="true" [V0_FILE]png:file="public/task-management-app.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/task-management-app-h5Wd5toJM2Do9OaoG9Ee3ZvrcS2WEU.png" isMerged="true" [V0_FILE]png:file="public/design-system-components.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/design-system-components-8pDqfpVSUVrOzaaMDlIxaZi9tcwQP8.png" isMerged="true" [V0_FILE]png:file="public/analytics-dashboard-charts.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/analytics-dashboard-charts-bfvzGrsela8xslvhLn0TdCC02Kml9b.png" isMerged="true" [V0_FILE]jpg:file="public/ai-chat-application-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ai-chat-application-interface-tRBDP3c27QQDErCIlYdrzgIR261xuR.jpg" isMerged="true" [V0_FILE]typescriptreact:file="lib/github.ts" isMerged="true" // GitHub API utility to fetch user data and repositories // This file handles all GitHub API calls for the portfolio const GITHUB_USERNAME = "lilhop36" const GITHUB_API_BASE = "https://api.github.com" // Interface for GitHub repository data interface GitHubRepo { id: number name: string description: string | null html_url: string stargazers_count: number language: string | null topics: string[] } // Interface for GitHub user data interface GitHubUser { login: string name: string | null bio: string | null avatar_url: string public_repos: number followers: number following: number html_url: string } /** * Fetch GitHub user profile information * @returns GitHub user data or null if fetch fails */ export async function getGitHubUser(): Promise { try { const response = await fetch(`${GITHUB_API_BASE}/users/${GITHUB_USERNAME}`, { headers: { Accept: "application/vnd.github.v3+json", }, next: { revalidate: 3600 }, // Cache for 1 hour }) if (!response.ok) { console.error("[v0] Failed to fetch GitHub user:", response.status) return null } return await response.json() } catch (error) { console.error("[v0] Error fetching GitHub user:", error) return null } } /** * Fetch GitHub repositories sorted by stars * @param limit Number of repositories to fetch (default: 6) * @returns Array of GitHub repositories or empty array if fetch fails */ export async function getGitHubRepos(limit = 6): Promise { try { const response = await fetch( `${GITHUB_API_BASE}/users/${GITHUB_USERNAME}/repos?sort=stars&order=desc&per_page=${limit}`, { headers: { Accept: "application/vnd.github.v3+json", }, next: { revalidate: 3600 }, // Cache for 1 hour }, ) if (!response.ok) { console.error("[v0] Failed to fetch GitHub repos:", response.status) return [] } const repos = await response.json() // Filter out forked repositories and return only original projects return repos.filter((repo: any) => !repo.fork) } catch (error) { console.error("[v0] Error fetching GitHub repos:", error) return [] } } [V0_FILE]typescriptreact:file="components/projects-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" // Projects section showcasing your work // Update project titles, descriptions, tags, and links with your own projects "use client" import { Github } from "lucide-react" import GitHubProjects from "./github-projects" export function ProjectsSection() { return (

{/* Section Header */}

Featured Projects

Explore my latest work and contributions on GitHub

{/* View All Projects Link */}

View All Projects on GitHub

) } [V0_FILE]typescriptreact:file="components/about-section.tsx" isEdit="true" isMerged="true" // About section with bio and skills display // Update the bio text and skills list with your own information export function AboutSection() { const skills = [ { category: "Frontend", items: [ { name: "React.js", level: 90 }, { name: "TypeScript", level: 85 }, { name: "Tailwind CSS", level: 90 }, { name: "Next.js", level: 85 }, ], }, { category: "Backend", items: [ { name: "Node.js", level: 85 }, { name: "MongoDB", level: 85 }, { name: "Java", level: 80 }, { name: "API Design", level: 80 }, ], }, { category: "Mobile & Tools", items: [ { name: "Android Development", level: 80 }, { name: "Git", level: 90 }, { name: "Problem Solving", level: 90 }, { name: "UI/UX Design", level: 75 }, ], }, ] return (

About Me

{/* Bio Section */}

I'm a passionate Software Engineering student from Ethiopia with a love for building web and mobile applications that solve real-world problems. My experience spans full-stack development, including React.js, Node.js, MongoDB, Java, and Android development.

I enjoy creating clean, efficient, and scalable code, and I'm constantly learning new technologies to improve my skills. I'm particularly interested in product design, user experience, and building digital solutions that bring people together.

When I'm not programming, I like exploring innovative tech ideas, improving my productivity, and experimenting with small projects that generate real value.

{/* Skills Section with Progress Bars */}

Skills & Expertise

{skills.map((skillGroup) => (

{skillGroup.category}

{skillGroup.items.map((skill) => (

{skill.name} {skill.level}%

{/* Progress Bar */}

))}

) } [V0_FILE]typescript:file="app/api/github/route.ts" isMerged="true" // API route to fetch GitHub repositories // This runs on the server and handles GitHub API calls safely import { getGitHubRepos } from "@/lib/github" export async function GET(request: Request) { try { const { searchParams } = new URL(request.url) const limit = Number.parseInt(searchParams.get("limit") || "6", 10) const repos = await getGitHubRepos(limit) return Response.json(repos, { headers: { "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=86400", }, }) } catch (error) { console.error("[v0] API error:", error) return Response.json({ error: "Failed to fetch repositories" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/github-projects.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Github, Star, Code2 } from "lucide-react" // Interface for GitHub repository data interface GitHubRepo { id: number name: string description: string | null html_url: string stargazers_count: number language: string | null topics: string[] } /** * GitHubProjects Component * Displays a grid of your GitHub repositories with real-time data * Fetches projects from GitHub API and displays them with stars, language, and links */ export default function GitHubProjects() { const [repos, setRepos] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { const fetchRepos = async () => { try { setLoading(true) const response = await fetch("/api/github?limit=6") if (!response.ok) { throw new Error(`API error: ${response.status}`) } const data = await response.json() if (data.error || data.length === 0) { setError("Unable to load projects from GitHub") } else { setRepos(data) } } catch (err) { console.error("[v0] Error in GitHubProjects:", err) setError("Failed to load projects") } finally { setLoading(false) } } fetchRepos() }, []) // Loading state if (loading) { return (

{[...Array(6)].map((_, i) => (

))}

) } // Error state with fallback if (error || repos.length === 0) { return (

{error || "No projects found"}

View on GitHub

) } return (

{repos.map((repo) => ( {/* Project Header */}

{repo.name}

{/* Project Description */}

{repo.description || "No description available"}

{/* Project Tags */}

{repo.language && ( {repo.language} )} {repo.topics && repo.topics.slice(0, 2).map((topic) => ( {topic} ))}

{/* Stars and Link */}

{repo.stargazers_count}

View →

))}

) } [V0_FILE]typescriptreact:file="components/experience-section.tsx" isEdit="true" isMerged="true" // Experience section showing your work history and projects // Update with your actual job titles, companies, dates, and descriptions export function ExperienceSection() { const experience = [ { id: 1, role: "Final Year Project – BHULink", company: "Private University Network", period: "2025 – Present", description: "Developing a university-exclusive social platform for academic updates, student interaction, and event sharing. Built with MERN stack, Next.js, Tailwind CSS, and MongoDB Atlas. Features include student feed, groups, events, real-time chat, notifications, and admin dashboard. Focused on privacy, security, and scalability for multi-campus expansion.", }, { id: 2, role: "OSTA Job Portal", company: "Full-Stack Web Application", period: "2025", description: "Developed a role-based job portal for the Oromia Science and Technology Authority. Built with React.js (frontend), Node.js (backend), and MongoDB (database). Features include job posting, application management, dashboards for employers and job seekers, and comprehensive admin controls.", }, { id: 3, role: "Equb & Idir Management App", company: "Android Development", period: "2024 – 2025", description: "Built an Android app in Java for managing Equb contributions and member interactions. Integrated SQLite and Firebase for data storage. Features include group creation, contribution tracking, winner selection, notifications, and detailed reports.", }, { id: 4, role: "Telegram Bot – Ethiopian News Summarizer", company: "AI Integration Project", period: "2025", description: "Developed a Telegram bot that fetches top news articles, summarizes them using OpenAI API, and sends translations in Afaan Oromo. Automated daily news delivery for users, improving accessibility of information.", }, { id: 5, role: "Personal & University Projects", company: "Web & Mobile Development", period: "2023 – 2025", description: "Built multiple web apps, scripts, and portfolio projects to strengthen coding and problem-solving skills. Hands-on experience with React.js, Node.js, MongoDB, Java, Android development, and Tailwind CSS.", }, ] return (

Experience & Projects

{/* Timeline */}

{experience.map((exp, index) => (

{/* Timeline Line */} {index !== experience.length - 1 && (

)} {/* Timeline Item */}

{/* Timeline Dot */}

{/* Content */}

{exp.role}

{exp.company}

{exp.period}

{exp.description}

))}

) } [V0_FILE]typescriptreact:file="components/contact-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Mail, Github, Linkedin, Send } from "lucide-react" export function ContactSection() { const [formData, setFormData] = useState({ name: "", email: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle") // Handle form input changes const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) } // Handle form submission const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { // Replace with your actual form submission endpoint // Example: await fetch('/api/contact', { method: 'POST', body: JSON.stringify(formData) }) console.log("Form submitted:", formData) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) setSubmitStatus("success") setFormData({ name: "", email: "", message: "" }) // Reset status after 3 seconds setTimeout(() => setSubmitStatus("idle"), 3000) } catch (error) { console.error("Error submitting form:", error) setSubmitStatus("error") setTimeout(() => setSubmitStatus("idle"), 3000) } finally { setIsSubmitting(false) } } return (

Let's Connect

I'm always interested in hearing about new projects and opportunities. Feel free to reach out!

{/* Social Links */}

Email Me GitHub LinkedIn

{/* Contact Form */}

{/* Name Input */}

Your Name

{/* Email Input */}

Your Email

{/* Message Textarea */}

Your Message

</div>

{/* Submit Button */}
          <button
            type="submit"
            disabled={isSubmitting}
            className="w-full px-6 py-3 bg-accent text-background rounded-lg hover:bg-accent/90 transition-colors font-semibold disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
          >
            {isSubmitting ? (
              <>
                <div className="w-4 h-4 border-2 border-background border-t-transparent rounded-full animate-spin" />
                Sending...
              </>
            ) : (
              <>
                <Send size={20} /> Send Message
              </>
            )}
          </button>

{/* Status Messages */}
          {submitStatus === "success" && (
            <div className="p-4 bg-green-500/10 border border-green-500/30 rounded-lg text-green-600 text-center">
              ✓ Message sent successfully! I'll get back to you soon.
            </div>
          )}
          {submitStatus === "error" && (
            <div className="p-4 bg-red-500/10 border border-red-500/30 rounded-lg text-red-600 text-center">
              ✗ Error sending message. Please try again or email me directly.
            </div>
          )}
        </form>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
// Footer component with copyright and social links
// Customize with your name and social media links

export function Footer() {
  const currentYear = new Date().getFullYear()

return (
    <footer className="border-t border-border py-8 px-4 bg-card/50">
      <div className="max-w-6xl mx-auto">
        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
          {/* Copyright */}
          <p className="text-muted-foreground text-sm">© {currentYear} Abdi. All rights reserved.</p>

{/* Footer Links */}
          <div className="flex gap-6 text-sm">
            <a href="#about" className="text-muted-foreground hover:text-accent transition-colors">
              About
            </a>
            <a href="#projects" className="text-muted-foreground hover:text-accent transition-colors">
              Projects
            </a>
            <a href="#contact" className="text-muted-foreground hover:text-accent transition-colors">
              Contact
            </a>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]jpg:file="public/abdi-profile.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/me-FYypJCeIm4AE6P1e7CTWTCbMhRhfPf.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isMerged="true"
// Hero section with name, profession, and call-to-action buttons
// Customize the name, title, and bio with your own information

import Image from "next/image"

export function HeroSection() {
  return (
    <section id="home" className="min-h-screen flex items-center justify-center px-4 py-20 bg-background">
      <div className="max-w-5xl mx-auto w-full">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          {/* Left side - Text content */}
          <div>
            <p className="text-accent font-semibold mb-2">Hi, I'm Abdi Garoma</p>
            <h1 className="text-5xl md:text-6xl font-bold mb-6 text-balance">
              Software Engineer | Architect of Innovative Digital Solutions
            </h1>
            <p className="text-lg text-muted-foreground mb-8 text-balance">
              I specialize in building high-quality mobile and web applications using modern technologies. From React
              Native to Next.js, I bring ideas to life with clean code and intuitive design.
            </p>

{/* Location and stats */}
            <div className="flex gap-6 mb-8 flex-wrap">
              <div>
                <p className="text-muted-foreground text-sm">Location</p>
                <p className="font-semibold">Addis Ababa, Ethiopia</p>
              </div>
              <div>
                <p className="text-muted-foreground text-sm">Repositories</p>
                <p className="font-semibold">13 repositories</p>
              </div>
            </div>

{/* Call-to-Action Buttons */}
            <div className="flex gap-4 flex-wrap">
              <a
                href="#projects"
                className="px-8 py-3 bg-accent text-background rounded-lg hover:bg-accent/90 transition-colors font-semibold"
              >
                View My Work
              </a>
              <a
                href="#contact"
                className="px-8 py-3 border border-border rounded-lg hover:border-accent transition-colors font-semibold"
              >
                Get In Touch
              </a>
            </div>
          </div>

{/* Right side - Profile image */}
          <div className="flex justify-center">
            <div className="w-64 h-64 rounded-lg overflow-hidden shadow-xl border border-border">
              <Image
                src="/abdi-profile.jpg"
                alt="Abdi Garoma"
                width={256}
                height={256}
                className="w-full h-full object-cover"
                priority
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/services-section.tsx" isMerged="true"
// Services/What I Do section showcasing main areas of expertise

import { Smartphone, Globe, Zap } from "lucide-react"

export function ServicesSection() {
  const services = [
    {
      icon: Smartphone,
      title: "Mobile Development",
      description: "Building native and cross-platform mobile apps with React Native and Flutter",
    },
    {
      icon: Globe,
      title: "Web Development",
      description: "Creating modern web applications with Next.js, React, and TypeScript",
    },
    {
      icon: Zap,
      title: "Full-Stack Solutions",
      description: "End-to-end development from backend APIs to frontend interfaces",
    },
  ]

return (
    <section className="py-20 px-4 bg-card/30">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-4xl font-bold mb-4 text-center">What I Do</h2>
        <p className="text-muted-foreground text-center mb-12 max-w-2xl mx-auto">
          I offer comprehensive development services across mobile and web platforms
        </p>

<div className="grid md:grid-cols-3 gap-8">
          {services.map((service, index) => {
            const Icon = service.icon
            return (
              <div
                key={index}
                className="p-8 bg-background rounded-lg border border-border hover:border-accent transition-colors"
              >
                <Icon className="w-12 h-12 text-accent mb-4" />
                <h3 className="text-xl font-bold mb-3">{service.title}</h3>
                <p className="text-muted-foreground">{service.description}</p>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/technologies-section.tsx" isMerged="true"
// Technologies section showcasing tech stack

export function TechnologiesSection() {
  const technologies = [
    "React Native",
    "Flutter",
    "Next.js",
    "React",
    "TypeScript",
    "Node.js",
    "Django",
    "Java",
    "Firebase",
    "MongoDB",
    "PostgreSQL",
    "Tailwind CSS",
  ]

return (
    <section className="py-20 px-4 bg-background">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-4xl font-bold mb-4 text-center">Technologies I Work With</h2>
        <p className="text-muted-foreground text-center mb-12 max-w-2xl mx-auto">
          A diverse toolkit for building scalable and modern applications
        </p>

<div className="flex flex-wrap gap-3 justify-center">
          {technologies.map((tech, index) => (
            <div
              key={index}
              className="px-6 py-3 bg-card border border-border rounded-full text-sm font-medium hover:border-accent transition-colors"
            >
              {tech}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Navigation } from "@/components/navigation"
import { HeroSection } from "@/components/hero-section"
import { ServicesSection } from "@/components/services-section"
import { TechnologiesSection } from "@/components/technologies-section"
import { ProjectsSection } from "@/components/projects-section"
import { ContactSection } from "@/components/contact-section"
import { Footer } from "@/components/footer"

export default function Portfolio() {
  const [activeSection, setActiveSection] = useState("home")

return (
    <div className="min-h-screen bg-background text-foreground">
      {/* Navigation Bar - Fixed at top */}
      <Navigation activeSection={activeSection} onSectionChange={setActiveSection} />

{/* Main Content */}
      <main className="pt-16">
        {/* Hero Section */}
        <HeroSection />

{/* Services Section */}
        <ServicesSection />

{/* Technologies Section */}
        <TechnologiesSection />

{/* Projects Section */}
        <ProjectsSection />

{/* Contact Section */}
        <ContactSection />

{/* Footer */}
        <Footer />
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import { ThemeProvider } from "@/lib/theme-provider"
import "./globals.css"

const geist = Geist({ subsets: ["latin"], variable: "--font-sans" })
const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-mono" })

export const metadata: Metadata = {
  title: "Abdi - Software Engineer",
  description: "Full-stack developer from Ethiopia showcasing projects and experience",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${geist.variable} ${geistMono.variable} font-sans antialiased`}>
        <ThemeProvider>{children}</ThemeProvider>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/* Light mode colors */
:root {
  --background: oklch(0.98 0 0);
  --foreground: oklch(0.15 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0 0);
  --primary: oklch(0.15 0 0);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.92 0 0);
  --secondary-foreground: oklch(0.15 0 0);
  --muted: oklch(0.75 0 0);
  --muted-foreground: oklch(0.45 0 0);
  --accent: oklch(0.65 0.2 280);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.9 0 0);
  --input: oklch(0.95 0 0);
  --ring: oklch(0.65 0.2 280);
  --chart-1: oklch(0.65 0.2 280);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.98 0 0);
  --sidebar-foreground: oklch(0.15 0 0);
  --sidebar-primary: oklch(0.65 0.2 280);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --sidebar-accent: oklch(0.92 0 0);
  --sidebar-accent-foreground: oklch(0.15 0 0);
  --sidebar-border: oklch(0.9 0 0);
  --sidebar-ring: oklch(0.65 0.2 280);
}

/* Dark mode colors */
.dark {
  --background: oklch(0.12 0 0);
  --foreground: oklch(0.95 0 0);
  --card: oklch(0.18 0 0);
  --card-foreground: oklch(0.95 0 0);
  --popover: oklch(0.18 0 0);
  --popover-foreground: oklch(0.95 0 0);
  --primary: oklch(0.12 0 0);
  --primary-foreground: oklch(0.95 0 0);
  --secondary: oklch(0.25 0 0);
  --secondary-foreground: oklch(0.95 0 0);
  --muted: oklch(0.45 0 0);
  --muted-foreground: oklch(0.65 0 0);
  --accent: oklch(0.65 0.2 280);
  --accent-foreground: oklch(0.12 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.25 0 0);
  --input: oklch(0.18 0 0);
  --ring: oklch(0.65 0.2 280);
  --chart-1: oklch(0.65 0.2 280);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.18 0 0);
  --sidebar-foreground: oklch(0.95 0 0);
  --sidebar-primary: oklch(0.65 0.2 280);
  --sidebar-primary-foreground: oklch(0.95 0 0);
  --sidebar-accent: oklch(0.25 0 0);
  --sidebar-accent-foreground: oklch(0.95 0 0);
  --sidebar-border: oklch(0.25 0 0);
  --sidebar-ring: oklch(0.65 0.2 280);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="lib/theme-provider.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"

type Theme = "light" | "dark"

interface ThemeContextType {
  theme: Theme
  toggleTheme: () => void
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>("light")
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    const savedTheme = localStorage.getItem("theme") as Theme | null
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
    const initialTheme = savedTheme || (prefersDark ? "dark" : "light")

setTheme(initialTheme)
    document.documentElement.classList.toggle("dark", initialTheme === "dark")
    setMounted(true)
  }, [])

const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light"
    setTheme(newTheme)
    localStorage.setItem("theme", newTheme)
    document.documentElement.classList.toggle("dark", newTheme === "dark")
  }

return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>
}

export function useTheme() {
  const context = useContext(ThemeContext)
  if (context === undefined) {
    // Return default values instead of throwing error
    return {
      theme: "light" as Theme,
      toggleTheme: () => {},
    }
  }
  return context
}
[V0_FILE]typescriptreact:file="components/navigation.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Menu, X, Sun, Moon } from "lucide-react"
import { useTheme } from "@/lib/theme-provider"

interface NavigationProps {
  activeSection: string
  onSectionChange: (section: string) => void
}

export function Navigation({ activeSection, onSectionChange }: NavigationProps) {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [mounted, setMounted] = useState(false)
  const { theme, toggleTheme } = useTheme()

useEffect(() => {
    setMounted(true)
  }, [])

// Navigation items for easy customization
  const navItems = ["home", "projects", "about", "contact"]

const handleNavClick = (item: string) => {
    onSectionChange(item)
    setIsMenuOpen(false)
    // Smooth scroll to section
    const element = document.getElementById(item)
    element?.scrollIntoView({ behavior: "smooth" })
  }

if (!mounted) {
    return null
  }

return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo/Brand */}
          <button
            onClick={() => handleNavClick("home")}
            className="text-xl font-bold text-accent hover:opacity-80 transition-opacity"
          >
            Abdi Garoma
          </button>

{/* Desktop Navigation Menu */}
          <div className="hidden md:flex gap-8 items-center">
            {navItems.map((item) => (
              <button
                key={item}
                onClick={() => handleNavClick(item)}
                className={`capitalize transition-colors font-medium ${
                  activeSection === item ? "text-accent" : "text-muted-foreground hover:text-foreground"
                }`}
              >
                {item}
              </button>
            ))}
            <button
              onClick={toggleTheme}
              className="p-2 rounded-lg hover:bg-secondary transition-colors"
              aria-label="Toggle theme"
            >
              {theme === "light" ? <Moon size={20} /> : <Sun size={20} />}
            </button>
          </div>

{/* Mobile Menu Button and Theme Toggle */}
          <div className="md:hidden flex items-center gap-2">
            <button
              onClick={toggleTheme}
              className="p-2 rounded-lg hover:bg-secondary transition-colors"
              aria-label="Toggle theme"
            >
              {theme === "light" ? <Moon size={20} /> : <Sun size={20} />}
            </button>
            <button className="p-2" onClick={() => setIsMenuOpen(!isMenuOpen)} aria-label="Toggle menu">
              {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>

{/* Mobile Navigation Menu */}
        {isMenuOpen && (
          <div className="md:hidden pb-4 flex flex-col gap-3 border-t border-border pt-4">
            {navItems.map((item) => (
              <button
                key={item}
                onClick={() => handleNavClick(item)}
                className={`capitalize text-left px-2 py-2 rounded transition-colors ${
                  activeSection === item ? "text-accent bg-accent/10" : "text-muted-foreground hover:text-foreground"
                }`}
              >
                {item}
              </button>
            ))}
          </div>
        )}
      </div>
    </nav>
  )
}</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This